<section id="button">
    <h1 class="demo-title">头像</h1>
    <div class="demo-panel">
        <h6>100*100头像</h6>
        <div>
            <img src="images/46.png" class="avatar avatar-width-100"/>
        </div>
        <pre lang-prism class="language-html">
            <code class="language-html">
                &lt;div&gt;
                    &lt;img src="images/46.png" class="avatar avatar-width-100"/&gt;
                &lt;/div&gt;
            </code>
        </pre>
        <br>
        <h6>80*80头像</h6>
        <div>
            <img src="images/46.png" class="avatar avatar-width-80"/>
        </div>
        <pre lang-prism class="language-html">
            <code class="language-html">
                &lt;div&gt;
                    &lt;img src="images/46.png" class="avatar avatar-width-80"/&gt;
                &lt;/div&gt;
            </code>
        </pre>
        <br>
        <h6>140*140头像</h6>
        <div>
            <img src="images/46.png" class="avatar avatar-width-140"/>
        </div>
        <pre lang-prism class="language-html">
            <code class="language-html">
                &lt;div&gt;
                    &lt;img src="images/46.png" class="avatar avatar-width-140"/&gt;
                &lt;/div&gt;
            </code>
        </pre>
        <h6>平铺头像</h6>
        <ul class="avatar-tiled">
            <li>
                <img src="images/46.png" class="avatar avatar-width-60"/>
            </li>
            <li>
                <img src="images/46.png" class="avatar avatar-width-60"/>
            </li>
            <li>
                <img src="images/46.png" class="avatar avatar-width-60"/>
            </li>
            <li>
                <img src="images/46.png" class="avatar avatar-width-60"/>
            </li>
            <li>
                <img src="images/46.png" class="avatar avatar-width-60"/>
            </li>
        </ul>
        <pre lang-prism class="language-html">
            <code class="language-html">
                &lt;ul lass="avatar-tiled"&gt;
                    &lt;li&gt;
                        &lt;img src="images/46.png" class="avatar avatar-width-60"/&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;img src="images/46.png" class="avatar avatar-width-60"/&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;img src="images/46.png" class="avatar avatar-width-60"/&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;img src="images/46.png" class="avatar avatar-width-60"/&gt;
                     &lt;/li&gt;
                    &lt;li&gt;
                        &lt;img src="images/46.png" class="avatar avatar-width-60"/&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            </code>
        </pre>
    </div>
</section>